<template>
  <div class="role-list">
    <!-- 头部结构 -->
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :model="form" ref="form" :inline="true">
          <el-form-item label="输入搜索:" prop="name">
            <el-input v-model="form.name" placeholder="角色名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
            @click="onReset('form')"
            style="margin-right:10px">重置</el-button>
            <el-button type="primary" @click="onSubmit" :disabled="isLoading">查询搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 显示对话框 -->
      <el-button @click="handleAdd">添加角色</el-button>
      <!-- 主体结构 -->
      <el-table
      :data="roles"
      style="width: 100%"
      v-loading="isLoading">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述">
      </el-table-column>
      <!-- 如果要在当前的功能需要设置过滤器那么得获取到数据，
      获取数据就得要用自定义列模板 的作用域插槽工具 -->
      <el-table-column
        label="添加时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createdTime | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
            type="text"
            @click="$router.push({
              name: 'alloc-menu',
              params: {
                roleId: scope.row.id
              }
            })">
            分配菜单
            </el-button>
            <el-button
            type="text"
            @click="$router.push({
              name: 'alloc-resource',
              params: {
                roleId: scope.row.id
              }
            })">
            分配资源
            </el-button>
          </div>
          <div>
            <el-button
            type="text"
            @click="handleEdit(scope.row)">
            编辑
            </el-button>
            <el-button
            type="text"
            @click="handleDelete(scope.row)">
            删除
            </el-button>
          </div>
        </template>
      </el-table-column>
      </el-table>
      <!-- 添加角色的对话框结构 -->
      <el-dialog
        :title="isEdit ? '编辑角色' : '添加角色'"
        :visible.sync="dialogVisible"
        width="30%">
        <!-- 引入组件——添加与编辑功能单独封装到组件中 -->
        <create-or-edit
         :is-edit="isEdit"
         :role-id="roleId"
         @success="handleSuccess"
         @fail="handleFail">
        </create-or-edit>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import CreateOrEdit from './CreateOrEdit'
import { getRoles, deleteRole } from '@/services/role'
export default {
  name: 'RoleList',
  components: {
    CreateOrEdit
  },
  data () {
    return {
      form: {
        name: ''
      },
      // 用于保存加载状态
      isLoading: false,
      // 存储数据
      roles: [],
      // 控制对话框的展示
      dialogVisible: false,
      // 控制新增对话框的功能状态
      isEdit: false,
      // 存储正在编辑的角色 id
      roleId: ''
    }
  },
  created () {
    //  加载上级菜单信息
    this.loadRoles()
  },
  methods: {
    // 点击添加角色
    handleAdd () {
      this.dialogVisible = true
      this.isEdit = false
      // console.log(this.isEdit)
    },
    // 监听子组件的取消状态,点击取消时触发
    handleFail () {
      // 隐藏对话框
      this.dialogVisible = false
    },
    // 监听子组件的添加的状态，成功时触发 handleSuccess
    handleSuccess () {
      // 隐藏对话框
      this.dialogVisible = false
      // 刷新列表
      this.loadRoles()
    },
    // 重置按钮点击操作
    onReset (forName) {
      this.$refs[forName].resetFields()
    },
    // 提交筛选功能
    onSubmit () {
      this.loadRoles()
    },
    // 编辑角色
    handleEdit (role) {
      // console.log(role.id)
      this.dialogVisible = true
      this.isEdit = true
      // console.log(this.isEdit)
      this.roleId = role.id
    },
    handleDelete (role) {
      // console.log(rowData)
      // 删除的确认提示
      this.$confirm('确认删除吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 进行删除操作发送请求到服务器端进行删除
        const { data } = await deleteRole(role.id)
        // console.log(data)
        if (data.code === '000000') {
          // 更新数据列表
          this.loadRoles()
          // 提示信息
          this.$message({
            type: 'success',
            message: '已删除成功!'
          })
        }
      }).catch(err => {
        if (err && err.response) {
          this.$message({
            type: 'error',
            message: '删除失败，请重试'
          })
        } else {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
    },
    // 加载角色列表
    async loadRoles () {
      this.isLoading = true
      const { data } = await getRoles(this.form)
      // console.log(data)
      this.roles = data.data.records
      // 请求完毕取消加载中状态
      this.isLoading = false
    }
  },
  filters: {
    dateFormat (date) {
      date = new Date(date)
      return `${date.getFullYear()}-
      ${date.getMonth() + 1}-
      ${date.getDate()}-
      ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    }
  }
}

</script>

<style lang="scss" scoped></style>
